<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>理想国真惠玩</title>
    <!-- UIkit CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.2.2/dist/css/uikit.min.css"/>
</head>
<body style="height: 2000px;">
<!--设置视差,背景色黄色->白色 边框蓝色->红色,视差0.5-->
<div id="test-color" class="test-color uk-height-large uk-overflow-hidden uk-flex uk-flex-top"
     uk-parallax="background-color: yellow,white; border-color: #00f,#f00; viewport: 0.5"
     style="border: 10px solid #000;margin-top: 300px;">
    <!--设置视差目标,颜色变成绿色-->
    <h1 class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical"
        uk-parallax="target: #test-target; color: #0f0; viewport: 0.5">Headline</h1>

</div>

<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/uikit@3.2.2/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.2.2/dist/js/uikit-icons.min.js"></script>
</body>
</html>